8-1 ⑤P⑤Bz

在一個網頁內，事件 (Events) 通常是指由瀏覽器所偵測到使用者的特定動作，瀏覽器可以根據所偵測到的事件，來進行相關動作。舉例來說，使用者點選或移動滑鼠，或是瀏覽器的載入網頁，都可以看成是事件的產生。對於特定的事件，我們可以在瀏覽器內偵測得之，並以特定的程式來對此事件做出反應，此程式即稱為「事件處理器」(Event handlers)，又稱為 Callback。

一般在瀏覽器常見的事件，可列表簡介如下：

在下列範例中，我們使用 onFocus 和 onBlur 事件來改變文字欄位的內容：

Example（onFocus01.htm）：

在上述範例中，只要使用者點選文字欄位，onFocus 的事件被啟動，欄位的內容就會變成「很高興我又成為鎂光燈的焦點了！」。若此時在欄位外任意處點一下，onBlur 的事件就會被啟動，欄位的內容就會變成「唉，又要離我而去了！」。上述範例的完整原始檔案如下：

原始檔（onFocus01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>聚焦和失焦</h2>
<hr>

<center>
<input value="請點我！" size=30
	onBlur="this.value='唉，又要離我而去了！'"
	onFocus="this.value='很高興我又成為鎂光燈的焦點了！'">
</center>

<hr>
</body>
</html>

Hint
在上述範例中，this 代表此文字欄位本身。

我們可以使用 body 標籤的 onLoad 和 onUnload 屬性，來定義在載入網頁和離開網頁時必須執行的事件處理程式，請見下列範例：

Example（onLoad01.htm）：

Hint
一般新版的瀏覽器會阻斷彈出視窗（block popup windows），如果你安裝了 Google taskbar，也會有同樣的效應。因此在嘗試這些範例時，你必須確定你的瀏覽器並沒有阻斷彈出視窗，以使範例運作正常。

當你載入此網頁時，會出現下列警告視窗：

接著當你要卸載此網頁時（可能是載入另一個網頁或是關掉瀏覽器），會跳出另一個警告視窗：

上述範例的完整原始檔案如下：

原始檔（onLoad01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onLoad="alert(string1)" onUnload="alert(string2)">
<h2 align=center>「送往迎來」視窗</h2>
<hr>

<script language="javascript">
string1 = "╔══════════════════════════════╗\n"
         +"║　　　　歡　迎　光　臨　　　　║\n"
         +"╠══════════════════════════════╣\n"
         +"║　　　　　　　　　　　　　　　║\n"
         +"║　這裡是JavaScript線上手冊，　║\n"
         +"║　在這裡可以學到好多的東東哦！║\n"
         +"║　希望你玩得愉快！　　　　　  ║\n"
         +"║　　　　　　　　　　　　　　  ║\n"
         +"╚══════════════════════════════╝\n";
string2 = "這麼快就要走啦？有空再來玩！";
</script>

<p align=center>
此網頁會「送往迎來」！！！

<hr>
</body>
</html>

Hint
你也可以使用 window.onLoad=functionName1 和 window.onUnload=function2 來達到同樣的效果。

但是 onUnload 並不十分穩定，若要保證在視窗被關閉前，能夠執行某一段程式碼，那就要使用 onBeforeUnload，例如，你可以在在 onBeforeUnload 定義 JavaScript 程式碼以開啟另一個視窗，因此每當你關視窗時，又會開另一個視窗，形成「打不死的蟑螂」，這是各大色情網站必備的技巧（或許你早就知道了...）。請見下列範例：

Example（foreverCockroach01.htm）：

上述範例的完整原始檔案如下：

原始檔（foreverCockroach01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body onBeforeUnload="openNewWin()">

<script>
function openNewWin(){
	// 如果視窗名稱固定，就無法一再開新視窗。
	// 因此使用亂數來當視窗名稱...所以關一個就會再生一個新的出來
	winName = Math.floor(Math.random()*10000);
	window.open('foreverCockroach01.htm', winName, 'location=1,toolbar=1,menubar=1,status=1');
}
</script>

<h2 align=center>打不死的蟑螂</h2>
<hr>
你關不掉我~XD

</body>
</html>

也可以在 onBeforeUnload 事件一次開啟十個視窗，那麼蟑螂不但打不死，而且還會越生越多！

Hint
自從我在網頁上放了上述範例之後，三不五時就會有人寫信來罵我，說我幹嘛放這個範例，讓他們不得不重開機。唉，既然是教材，當然要「真槍實彈」，不能「講講就算」。難道一定要重開機嗎？當然不是嘍，有幾種方法：
  1. 關閉網路，關掉「打不死的蟑螂」視窗，再連接網路。
  2. 取消 IE 瀏覽器對 JavaScript 的支援：將「工具/網際網路選項/安全性/自訂層級/指令碼處理/Active scripting」暫時改成「停用」，關掉「打不死的蟑螂」視窗，恢復原先設定。
  3. 從工作管理員將瀏覽器殺掉。
  4. 從軟體選項選用「禁止彈出視窗」。
這些方法，聰明的你想到了嗎？

以下這個綜合範例，顯示了數種事件的使用：

Example（onEvent01.htm）：

任一個物件都可以偵測很多不同的事件，而且在新版的瀏覽器中，可偵測的事件類別是越來越多，請參見上述範例「以 "on" 開始的性質」欄位。（由於篇幅有限，不再列出本範例之程式碼。）

JavaScript 程式設計與應用：用於網頁用戶端